<template>
    <div class="app-container">
        <el-form v-show="show" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <el-select clearable v-model="formInline.status" placeholder="请选择用户类型">
                    <el-option v-for="(item, index) of eductionList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Search" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>

        <FunNavigation @addFrom="addFromPop" @refreshFn="listFn"></FunNavigation>
        <el-table header-cell-class-name="tableBackground" :data="list" stripe style="width: 100%">
            <el-table-column width="80" prop="id" label="id" />
            <el-table-column prop="name" label="角色名" />
            <el-table-column prop="status" label="类别">
                <template #default="scope">
                    <el-tag>{{ eductionName(scope.row.status) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" />
            <el-table-column width="180" prop="createdAt" label="添加时间">
                <template #default="scope">
                    {{ parseTime(new Date(scope.row.createdAt).getTime()) }}
                </template>
            </el-table-column>
            <el-table-column width="310" fixed="right" prop="address" label="操作">
                <template #default="scope">
                    <el-button @click="addFromPop(scope.row)" :icon="Edit" type="warning" size="small">修改</el-button>
                    <el-popconfirm @confirm="deleteFn([scope.row.id])" title="您确定要删除这个类别吗？">
                        <template #reference>
                            <el-button :icon="Delete" type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <AddEduction @onsuccess="listFn" ref="AddEductionRef"></AddEduction>
</template>
<script>
export default {
    name: "roleList"
}
</script>
<script setup>

import { parseTime, eductionName, eduction } from '@/utils';
import { postAdmindeduction, deletededuction } from '@/api/api';
import FunNavigation from '@/components/funNavigation/funNavigation.vue';
import { Edit, Finished, Delete } from '@element-plus/icons-vue';
import { onMounted, ref, reactive } from 'vue'
import AddEduction from './components/AddEduction.vue';
// import EditRolePermission from './components/editRolePermission.vue';
import { permission } from '@/hooks/permission';
const eductionList = ref(eduction)
const formInline = reactive({
    status: '',
    title: ''
})
const show = ref(true)
onMounted(() => {
    listFn()
})


function onSubmit() {
    listFn()
}

const AddEductionRef = ref(null)

function addFromPop(obj) {
    AddEductionRef.value.dialogVisible = true
    AddEductionRef.value.addFormFn(obj)
}
const list = ref([])
async function listFn() {
    const { data } = await postAdmindeduction({
        ...formInline,
        status: formInline.status ? [formInline.status] : []
    })
    list.value = data
}
async function deleteFn(id) {
    await deletededuction(id)
    listFn()

}

</script>

<style>
.tableBackground {
    background: red;
}
</style>
  